<!--
 * @Author: Wangtao
 * @Date: 2020-10-19 16:18:17
 * @LastEditors: zhanwang
 * @LastEditTime: 2021-11-09 18:17:08
-->
<template>
  <div
    ref="nodeRef"
    v-if="!isEmpty(node)"
    :style="nodeContainerStyle"
    @dblclick="dbClickNode"
    @click="clickNode"
    @mouseup="changeNodeSite"
    :class="nodeContainerClass"
  >
    <i class="delete MC_iconfont MC_icon-quxiao-mian" v-if="!node?.viewOnly" @click.stop="nodeDelete"></i>
    <div class="node-info">
      <div class="ef-node-left-ico flow-node-drag">
        <icon-svg :ico-color="iconMap.get(node?.type)?.icoColor" :icon-class="iconMap.get(node?.type)?.ico" />
      </div>
      <div class="ef-node-text" :show-overflow-tooltip="true">
        {{ node?.data.name }}
      </div>
    </div>
    <div class="condition">
      <span
        v-for="(condition, index) in node.condition"
        :class="[!condition.label && 'none']"
        :id="node.id + '-' + index"
        :key="index"
        ><span class="flow-node-drag">{{ condition.label }}</span></span
      >
    </div>
  </div>
</template>

<script lang="ts" setup>
import { withDefaults, defineProps, computed, defineEmits, defineExpose, ref } from 'vue'
import { v4 } from 'uuid'
import { iconMap } from './constants'
import { isEmpty } from 'lodash'
const props = withDefaults(
  defineProps<{
    node: any
    activeElement: any
  }>(),
  {
    node: {},
    activeElement: {}
  }
)

// const _this = getCurrentInstance()

const nodeRef: any = ref(null)

const emits = defineEmits(['dbClick', 'nodeClick', 'changeNodeSite', 'delete'])

const getUUID: any = computed(() => {
  return v4().replace(/-/g, '')
})

const nodeContainerClass: any = computed(() => {
  return {
    'ef-node-container': true,
    'ef-node-active': props.activeElement.type === 'node' && props.activeElement.nodeId === props.node.id
  }
})

const nodeContainerStyle: any = computed(() => {
  return {
    top: props.node.top,
    left: props.node.left
  }
})

const nodeIcoClass: any = computed(() => {
  const nodeIcoClass: any = {}
  // 添加该class可以推拽连线出来，viewOnly 可以控制节点是否运行编辑
  nodeIcoClass['flow-node-drag'] = !props.node.viewOnly
  return nodeIcoClass
})

const dbClickNode = () => {
  emits('dbClick', props.node)
}
const clickNode = () => {
  emits('nodeClick', props.node)
}

// 鼠标移动后抬起
const changeNodeSite = () => {
  // 避免抖动
  if (props.node.left === nodeRef.value.style.left && props.node.top === nodeRef.value.style.top) {
    return
  }
  emits('changeNodeSite', {
    nodeId: props.node.id,
    left: nodeRef.value.style.left,
    top: nodeRef.value.style.top
  })
}

// 点击删除节点
const nodeDelete = () => {
  emits('delete', props.node)
}

defineExpose({
  getUUID,
  nodeIcoClass
})
</script>

<style lang="stylus" scoped>
$-font-color = #008cee
$-condition-bg = #F2F7F8
.none
  display none
/* 节点的最外层容器 */
.ef-node-container:hover
  .delete
    display block
.ef-node-container
  position absolute
  display flex
  border: 1px solid var(--mc-gray3-color)
  box-shadow: 0px 1px 1px 0px #E6EAED
  border-radius 5px
  background-color #fff
  flex-direction column
  z-index -1
  .delete
    color #FC6B5C
    font-size 12px
    position absolute
    right 5px
    top 5px
    cursor pointer
    display none
  .node-info
    display flex
    align-items center
    padding 15px 40px 15px
    color #303753
    font-size 14px
    justify-content center
  .condition
    display flex
    flex-direction row
    justify-content center
    > span
      color: var(--mc-main-color);
      background-color: var(--mc-lightblue-color);
      padding: 3px 5px 3px;
      margin: 0 5px 10px;
      border-radius: 4px;
    > span:hover
      cursor crosshair
.ef-node-container:hover
  /* 设置移动样式 */
  cursor move
  /* box-shadow: #1879FF 0px 0px 12px 0px; */
  // background-color #F0F7FF
  border 1px dashed #1879FF
/* 节点激活样式 */
.ef-node-active
  background-color #F0F7FF
  /* box-shadow: #1879FF 0px 0px 12px 0px; */
  background-color #F0F7FF
  border 1px solid #1879FF
/* 节点左侧的竖线 */
.ef-node-left
  width 4px
  background-color #1879FF
  border-radius 4px 0 0 4px
/* 节点左侧的图标 */
.ef-node-left-ico
  margin-right 5px
// .ef-node-left-ico:hover
  /* 设置拖拽的样式 */

/* 节点显示的文字 */
.ef-node-text
  /* 设置超出宽度文本显示方式 */
  white-space nowrap
  overflow hidden
  text-overflow ellipsis
  text-align center
  font-weight 500
/* 节点右侧的图标 */
.ef-node-right-ico
  line-height 32px
  position absolute
  right 5px
  color #84CF65
  cursor default
/* 节点的几种状态样式 */
.el-node-state-success
  line-height 32px
  position absolute
  right 5px
  color #84CF65
  cursor default
.el-node-state-error
  line-height 32px
  position absolute
  right 5px
  color #F56C6C
  cursor default
.el-node-state-warning
  line-height 32px
  position absolute
  right 5px
  color #E6A23C
  cursor default
.el-node-state-running
  line-height 32px
  position absolute
  right 5px
  color #84CF65
  cursor default
/* node-form */
.ef-node-form-header
  height 32px
  border-top 1px solid #dce3e8
  border-bottom 1px solid #dce3e8
  background #F1F3F4
  color #000
  line-height 32px
  padding-left 12px
  font-size 14px
.ef-node-form-body
  margin-top 10px
  padding-right 10px
  padding-bottom 20px
/* 连线中的label 样式 */
.jtk-overlay.flowLabel:not(.aLabel)
  padding 4px 10px
  background-color white
  color #565758 !important
  border 1px solid #E0E3E7
  border-radius 5px
/* label 为空的样式 */
.emptyFlowLabel, .ef-dot
  background-color #959AA6
  border-radius 5px
.ef-dot-hover
  background-color red
.ef-rectangle
  background-color #1879FF
.ef-rectangle-hover
  background-color red
.ef-img, .ef-img-hover, .ef-drop-hover
  border 1px dashed #1879FF
</style>
<style lang="stylus">
.node-info
  .svg-icon
    font-size 17px
</style>
